<template>
  <div class="qualifications-container">
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="/qualifications/myQualifications"
          class="el-menu-vertical-demo"
          router
          background-color="#f5f7fa"
          active-text-color="#409EFF"
        >
          <el-menu-item index="/qualifications/myQualifications">
            <i class="el-icon-document"></i>
            <span slot="title">我的资质</span>
          </el-menu-item>
          <el-menu-item index="/qualifications/construction">
            <i class="el-icon-document"></i>
            <span slot="title">施工资质</span>
          </el-menu-item>
          <el-menu-item index="/qualifications/decoration">
            <i class="el-icon-document"></i>
            <span slot="title">承装修试</span>
          </el-menu-item>
          <el-menu-item index="/qualifications/design">
            <i class="el-icon-document"></i>
            <span slot="title">设计资质</span>
          </el-menu-item>
          <el-menu-item index="/qualifications/supervision">
            <i class="el-icon-document"></i>
            <span slot="title">监理资质</span>
          </el-menu-item>
          <el-menu-item index="/qualifications/geological">
            <i class="el-icon-document"></i>
            <span slot="title">地质灾害</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'qualifications-page',
  data () {
    return {}
  },
  async created () {},
  methods: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.qualifications-container {
  display: flex;
  justify-content: space-between;
  // height: 877px;
  .el-container {
    .el-aside {
      background-color: #f5f7fa;
      .el-menu {
        border: none;
      }
    }
    .el-main {
      padding: 20px;
    }
  }
}
</style>
